import { useEffect, useLayoutEffect, useRef, useState } from "react";

function App() {
  const [count, setCount] = useState(1);

  const boxRef = useRef<HTMLDivElement>(null);
  const [show, setShow] = useState(false);

  // 1. 你的 Effect 函数更新了一些状态。
  // 2. 这些状态的改变导致了重新渲染，从而导致 Effect 函数依赖的状态发生改变。
  useEffect(() => {
    console.log("App Effect");

    setCount(count + 1);
  }, []);

  /**
   * 我的 Effect 做了一些视觉相关的事情，在它运行之前我看到了一个闪烁
   *    1. 注意需要修改 mant.tsx 中的代码，变成 18 之前的方式
   */
  useLayoutEffect(() => {
    if (show && boxRef.current) {
      // 给这个 div 增加一个 marginTop 的 css 样式
      boxRef.current.style.marginTop = "100px";
    }
  }, [show]);

  return (
    <div>
      <h1>App</h1>
      <button onClick={() => setShow(!show)}>{`` + show}</button>
      <hr />
      {show && <div ref={boxRef} className="box"></div>}
    </div>
  );
}

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setCount((co) => co + 1);
    }, 1000);
  }, []);

  // useEffect(() => {
  //   const intervalId = setInterval(() => {
  //     setCount(count + 1); // 你想要每秒递增该计数器...
  //   }, 1000);
  //   return () => clearInterval(intervalId);
  // }, [count]); // 🚩 ... 但是指定 `count` 作为依赖项总是重置间隔定时器。

  /**
   * 如下代码是有问题的，不会累加，只会变成 1
   */
  // useEffect(() => {
  //   // setInterval(() => {
  //   //   setCount(count + 1);
  //   // }, 1000);

  //   // 上面的 setInterval 可以简单的认为就是如下代码
  //   setCount(count + 1);
  //   setCount(count + 1);
  //   setCount(count + 1);
  //   setCount(count + 1);
  //   setCount(count + 1);
  //   setCount(count + 1);
  //   // ...
  // }, []);

  return <h1>{count}</h1>;
}
